<template>
  <div class="alipay-config-page">
    <page-header-wrapper>
      <a-card :bordered="false">
        <template>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 支付宝AppId： </a-col>
            <a-input class="input-class" v-model="params.app_id" disabled/>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> User ID： </a-col>
            <div style="margin: 10px 8px 25px 0">
              <a-input style="width:1100px;" v-model="params.user_id" disabled/>
              <div style="font-size: 14px; color: #aeaeae; margin-top: 5px">
                需要通过进件创建特约商户号 <span style="color: #1890ff; cursor: pointer" @click="$router.push({path:'/setting/appletManagement/alipay'})">添加进件内容></span>
              </div>
            </div>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 支付宝商户名称（用于分账）：： </a-col>
            <a-input class="input-class" v-model="params.name" disabled/>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> Aes Key： </a-col>
            <a-input class="input-class" v-model="params.aes_key" disabled/>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 支付宝公钥(alipay_public_key)： </a-col>
            <a-textarea  class="input-class" v-model="params.alipay_public_key" auto-size disabled/>
            <!-- <a-textarea style="width:500px;height: 100px;margin: 15px 0 40px 0;" v-model="params.alipay_public_key"/> -->
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 应用公钥： </a-col>
            <a-textarea class="input-class" v-model="params.app_public_key" auto-size disabled/>
            <!-- <a-textarea style="width:500px;height: 100px;margin: 15px 0 40px 0;" v-model="params.app_public_key"/> -->
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 应用私钥： </a-col>
            <a-textarea class="input-class" v-model="params.app_private_key" auto-size disabled/>
            <!-- <a-textarea style="width:500px;height: 100px;margin-bottom: 30px;" v-model="params.app_private_key"/> -->
          </a-row>
        </template>
      </a-card>
    </page-header-wrapper>
  </div>
</template>
<script>
import { getAlipayConfig } from '@/api/setting/alipayConfig'

export default {
  name: 'AlipayConfig',
  components: {},
  data() {
    return {
      params: {
        app_id: null,
        alipay_public_key: null,
        app_public_key: null,
        app_private_key: null,
        aes_key: null,
        user_id: null,
        name: null
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData: function () {
      getAlipayConfig({}).then((res) => {
        const data = res.data
        if (data) {
          this.params.alipay_public_key = data.alipay_public_key
          this.params.app_id = data.app_id
          this.params.app_private_key = data.app_private_key
          this.params.app_public_key = data.app_public_key
          this.params.aes_key = data.aes_key
          this.params.user_id = data.user_id
          this.params.name = data.name
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.alipay-config-page{
  .required::before {
    content: '*';
    color: red;
  }
  .input-class {
    width: 1100px;
    margin: 10px 8px 25px 0;
  }
  input {
    max-width: 600px;
  }
  textarea{
    max-width: 600px;
  }
}

</style>
